<template>
  <div class="detail">
    <div class="chat-detail">
      <div class="chat-wrapper">
        <div class="chat">
          <div class="icon"><i class="el-icon-s-custom"/></div>
          <div>
            <h4>{{ chat.name }}</h4>
            <p><span class="chat-info">创建时间：{{ chat.createTime }}</span></p>
          </div>
        </div>
        <div class="chat-data">
          <div class="item" v-for="(item,index) in statistics" :key="index">
            <div>
              <div class="chat-dt-val">{{ chat[item.k] }}</div>
              <div><span class="chat-info">{{ item.label }}</span></div>
            </div>
            <span class="line" v-if="item.l"/>
          </div>
        </div>
      </div>
      <div class="notice">
        <h4>群公告</h4>
        <div class="chat-info notice-data" v-html="chatNotice()"></div>
      </div>
    </div>

    <div class="chat-members">
      <div class="member-search-wrapper">
        <div style="color: hsl(0, 0%, 40%);">成员名称：</div>
        <el-input maxlength="20" class="al-width-500"
                  v-model="query.nickName" @keyup.enter.native="search"
                  clearable placeholder="输入昵称"/>
        <el-button style="margin-left: 10px;" size="small" type="primary" @click="search">查询</el-button>
      </div>

      <wx-table ref="tab" search-api="/wxqy/group-chat/chat-members" :init-query="query"
                :has-control="false" :autoHeight="true"
                :labels="tableLabel">
        <template #adminType="{param}">
          <span :class="`member-type-${param.adminType}`">{{ memberType(param.adminType) }}</span>
        </template>
        <template #joinScene="{param}">
          <span>{{ memberJoinScene(param) }}</span>
        </template>
        <template #isDelete="{param}">
          <span :class="{'member-exit':param.isDelete}">{{ param.isDelete ? '已退群' : '' }}</span>
        </template>
        <template #time="{param}">
          <span>{{ param.joinTime }}</span>
          <span v-if="param.isDelete" class="member-exit-time">
            {{ param.exitTime }}
          </span>
        </template>
      </wx-table>
    </div>
  </div>
</template>

<script>
import WxTable from "@/components/wxqy/table/WxTable";
import {groupChatDetail} from "@/api/wxqy/groupChat";

export default {
  name: "detail",
  components: {WxTable},
  data() {
    return {
      id: 0,
      statistics: [
        {k: 'owner', label: '群主', l: true}, {k: 'total', label: '群总人数', l: true},
        {k: 'dayJoin', label: '今日入群数', l: true}, {k: 'dayLose', label: '今日退群数', l: false}
      ],
      tableLabel: [
        {label: '群昵称', prop: 'name'}, {label: '类型', prop: 'adminType', width: 120},
        {label: '入群方式', prop: 'joinScene'}, {label: '是否退群', prop: 'isDelete', width: 120},
        {label: '添加时间 | 退群数据', prop: 'time'}
      ],
      chat: {},
      members: {},
      query: {chatId: null, nickName: null}
    }
  },
  methods: {
    async groupDeatil(id) {
      this.query.chatId = id
      await groupChatDetail(id).then(e => this.chat = e.data)
    },
    chatNotice() {
      if (this.chat.notice) {
        let notice = this.chat.notice.split('\n')
        return notice.map(n => '<p class="doc-line">' + n + '</p>').join(' ')
      }
      return "未设置";
    },
    memberType(type) {
      //  成员类型0:普通群成员,1:管理员,2:群主
      if (type === 2) return '群主';
      if (type === 1) return '管理员';
      return '普通成员'
    },
    memberJoinScene(row) {
      let {joinScene, adminType} = row
      if (adminType === 2) return ''
      if (joinScene === 1) return "由群成员邀请入群（直接邀请入群）"
      if (joinScene === 2) return "由群成员邀请入群（通过邀请链接入群）"
      return "通过扫描群二维码入群"
    },
    search() {
      this.$refs.tab.search(this.query)
    }
  },
  created() {
    let id = this.$route.query.id || 0
    if (id) {
      this.groupDeatil(id)
    }
  }
}
</script>

<style scoped lang="scss">
@mixin chat-detail {
  display: flex;
  justify-content: space-around;
}

.detail {
  padding: 10px;
}

.chat-detail {
  display: flex;

  .chat-wrapper {
    width: 70%;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
  }

  .chat-info {
    font-size: 14px;
    color: hsl(0, 0%, 40%);
  }

  .chat {
    display: flex;
    align-items: center;

    .icon {
      width: 50px;
      height: 50px;
      font-size: 40px;
      background-color: #ccc;
      border-radius: 25px;
      text-align: center;
      margin-right: 20px;

      .el-icon-s-custom {
        color: #fff;
      }
    }
  }

  .chat-data {
    @include chat-detail;
    text-align: center;

    .item {
      @include chat-detail;
      flex: 0 0 24%;
    }

    .line {
      width: 1px;
      height: 30px;
      background: hsl(0, 0%, 80%);
    }

    .chat-dt-val {
      font-weight: 600;
      font-size: 16px;
      margin-bottom: 10px;
    }
  }

  .notice {
    margin-left: 10px;
    background-color: #fff;
    width: 30%;
    padding: 10px;
    scroll-behavior: smooth;
    border-radius: 10px;

    .notice-data {
      height: 100px;
      overflow-y: auto;
      overflow-x: hidden;

      ::v-deep .doc-line {
        text-indent: 2em;
      }
    }
  }
}

.chat-members {
  margin-top: 10px;

  .member-search-wrapper {
    padding: 14px 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    background-color: #fff;
    display: flex;
    align-items: center;
  }

  .member-exit, .member-exit-time {
    color: #e76551;
  }

  .member-exit-time:before {
    content: ' | ';
    color: #616161;
  }

  .member-type-2 {
    color: #7a6df0;
  }

  .member-type-1 {
    color: #00afff;
  }
}
</style>
